<template>
  <v-text-field
    :value="value"
    :label="config.label"
    :placeholder="$t('formConfig.placeholder') + config.label"
    :disabled="config.disabled"
    :rules="rules"
    :dense="config.dense"
    :color="config.color"
    :background-color="config.backgroundColor"
    :outlined="config.outlined"
    :solo="config.solo"
    :solo-inverted="config.soloInverted"
    :single-line="config.singleLine"
    :hide-details="hideInfo"
    clearable
    @input="valueInput"
    @change="$emit('valueChangeEmit', $attrs.value)"
  >
    <!-- flat -->
    <!-- required -->
  </v-text-field>
</template>

<script>
import { isEmptyValue } from '@/utils/tools'
export default {
  // 基础文本输入框组件
  name: 'BaseTextField',

  props: {
    // 配置信息
    configItem: { type: Object, default: () => {} },
    // 当前值
    value: { type: String, default: '' },
    // 隐藏信息
    hideDetail: { type: Boolean, default: null },
    // 不校验规则
    hideRules: { type: Boolean, default: null }
  },

  data() {
    return {
      // 重定向配置信息
      config: this.configItem
    }
  },

  computed: {
    rules() {
      if (!this.hideRules) {
        return this.configItem.rules
      } else {
        return []
      }
      // return this.config.rules
    },

    hideInfo() {
      if (isEmptyValue(this.hideDetail)) {
        return 'hideDetail' in this.configItem ? this.configItem.hideDetail : true
      } else {
        return this.hideDetail
      }
    }
  },

  methods: {
    valueInput(value) {
      this.$emit('input', value)
    },

    valueChange() {
      this.$emit('valueChangeEmit', this.currentValue)
    }
  }
}
</script>

<style></style>
